import React, { useState ,useEffect} from 'react'
// JSX 就是对象 -> React.createElement('div',{className:'hello','Hello World'})
const Hello=() => <div className='hello'>Hello World</div>;
// console.log(Object.prototype.toString.call(Hello));
// jsx 通过babel 会转义为React.createElement()
// props 是父组件给的 不是自己的
const Title=(props)=>{
  const {title}=props
  return (
    <div>
      {title}
    </div>
  )
}
// 状态 自有的 通过useStat设置 是响应式的 但一般建议放在父组件中
// 便于多个子组件共享数据
// 子组件里 props参数对像的
// 子组件里一般不要添加状态
const Header =()=>{
  return (
    <header>
      <Title title="首页"/>
    </header>
  )
}
const Main=({users})=>{
  return (
    <div>
      Main
      <ul>
        {/* key要 唯一的 */}
        {users.map(user=> <li key={user.id}>{user.name}--{user.age}</li> )}
      </ul>
    </div>
  )
}
const Footer=({count})=>{
  return (
    <footer>
      Footer,有{count}位用户
    </footer>
  )
}
const Index=()=>{
  console.log(1);
  // 状态 响应式
  // state 自有的 父组件
  const [users,setUsers]=useState([
    {
      id:1,
      name:'xx',
      age:11
    },
    {
      id:2,
      name:'qq',
      age:22
    }
  ])
  // 生命周期函数  onload  onDomContentLoaded
  // Component useEffect  代替  onDomContentLoaded 来表明组件挂载好了
  useEffect(()=>{
    console.log('组件加载好了');
    setTimeout(()=>{
      setUsers([
        ...users,
        {
          id:3,
          name:'kk',
          age:33
        }
      ])
    },1000)
  },[])
  // console.log(Object.prototype.toString.call(users));
  // setTimeout(()=>{
  //   // users.push({
  //   //   id:3,
  //   //   name:'kk',
  //   //   age:33
  //   // })
  //   // console.log(users)
  //   setUsers([...users,{
  //     id:3,
  //     name:'kk',
  //     age:33
  //   }])
  // },1000)
  
  return (
    // 如果唯一的父元素 只起到包裹作用 而不需要标签可以省略它
    <>
      <Header />
      <Main users={users}/>
      <Footer count={users.length}/>
    </>
  )
}
function App() {
  return (<Index />)
  // return <Hello />
  // return React.createElement('div',null,'hello world');
}

export default App
